﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Cloud Samurai Web Administration</title>
    <link rel="stylesheet" type="text/css" href="/PortalFiles/css/StyleSheet.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
    <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
    <script type="text/javascript" src="/PortalFiles/Scripts/Bowlus.js"></script>
</head>
<body>
    <div id="main">
        <div id="header">
            <div id="logo">
                <img src="/PortalFiles/images/samurai-logo.jpg" alt="Cloud Samurai" /></div>
                <div id="header-text">Administrator<br />Cloud Samurai - Production</div>
            </div>
        <div class="clear">
        </div>
        <div id="splash" class="splash"> <img src="/PortalFiles/images/ajax-loader.gif" alt="LOADING" style="margin-top: 20%"/></div>
            <div id="content" >
                <ul class="tab">
                    <li id="home" class="tab_item"><a href="/#tab/home"><span>Home</span></a></li>
                    <li id="application" class="tab_item"><a href="/#tab/application"><span>Application</span></a></li>
                    <li id="newTenant" class="tab_item"><a href="/#tab/newTenant"><span>New Tenant</span></a></li>
                    <li id="health" class="tab_item"><a href="/#tab/health"><span>Health</span></a></li>
                </ul>
                <div id="body"></div>

                <script id="homeView" type="text/x-jquery-tmpl">
                    <span id="refresh" class="right"><a href="javascript:void();" onclick="$('#refresh').text('Refreshing'); Bowlus.Controllers.home();" >Refresh</a></span>
                    <h2>Tenant Deployment</h2>
                    <table border="0" cellpadding="3" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Tenant Id</th>
                                <th>Host Name</th>
                                <th>Instance</th>
                                <th>Instance Id</th>
                                <th>Application</th>
                                <th>Target Instance</th>
                                <th>Standby Instance</th>
                                <th>Status</th>
                                <th>Changed</th>
                            </tr>
                        </thead>
                        <tbody id="table_tenantDly">
                        {{each model}}
                            <tr>
                                <td>${$value.TenantId}</td>
                                <td><a href="http://${$value.HostName}">${$value.HostName}</a>
                                </td>
                                <td>${$value.Instance}</td>
                                <td>${$value.InstanceId}</td>
                                <td>${$value.Application}</td>
                                <td>${$value.TargetInstance}</td>
                                <td>${$value.StandbyInstance}</td>
                                <td>${$value.Status}</td>
                                <td>${Bowlus.UI.displayTimestamp($value.Timestamp)}</td>
                            </tr>
                        {{/each}}
                        </tbody>
                    </table>
                </script>

                <script id="applicationView" type="text/x-jquery-tmpl">
                    <h2>Application</h2>
                </script>

                <script id="newTenantView" type="text/x-jquery-tmpl">
                    <h2>Create New Tenant</h2>
                    <div>
                        <div>
                            <div class="editor-label">
                                Tenant Id:
                            </div>
                            <div class="editor-field">
                                <input name="input_tenantId" id="input_tenantId" type="text" value="" />
                            </div>
                            <div class="editor-label">
                                Application:
                            </div>
                            <div class="editor-field">
                                <select name="input_application" id="input_application" onchange="Bowlus.Controllers.onAppChange()">
                                {{each applications}}
                                    <option value="${$value}">${$value}</option>
                                {{/each}}
                                </select>
                            </div>
                            <div class="editor-label">
                                Customizations:
                            </div>
                            <div class="editor-field">
                                <select name="input_customization" id="input_customization" size="5" multiple="multiple">
                                </select>
                            </div>
                            <div class="editor-label">
                                &nbsp;
                            </div>
                            <div class="editor-field">
                            <input type="submit" value="Provision" id="input_newTenSub" onclick="Bowlus.Controllers.submitNewTenant();" />
                            </div>
                        </div>
                    </div>
                </script>
                <script id="healthView" type="text/x-jquery-tmpl">
                    <span id="refresh" class="right"><a href="javascript:void();" onclick="$('#refresh').text('Refreshing'); Bowlus.Controllers.health();" >Refresh</a></span>
                    <h2>Health Status</h2>
                    <h3>ARR Instances</h3>
                    {{each model.ArrInstances}} 
                        <div><strong>${$value.Title}</strong> <span class="right">${$value.Status}</span></div>
                    {{/each}}
                    <h3>App Host Instances</h3>
                    {{each model.AppHostInstances}} 
                        <div><strong>${$value.Title}</strong> <span class="right">${$value.Status}</span></div>
                            {{each $value.Items}}
                                <div class="indent">${$value.Text} <span class="right">${$value.Status}</span></div>                            
                            {{/each}}
                    {{/each}}
                </script>
                <script id="newTenantSuccess" type="text/x-jquery-tmpl">
                    <div class="space"></div>
                    <div style="text-align:center">
                        Tenant successfully created<br/><br/><a href="javascript:void();" onclick="Bowlus.Controllers.newTenant();">Create Another</a>
                    </div>
                </script>

            <div class="clear space"></div>
            <div id="footer"></div>
        </div>
    </div>
</body>
</html>
